<template>
	<view class="content">
		<u-navbar placeholder :bgColor="bgColor" :border="false" autoBack>
			<!-- <view class="search-wrap" slot="center">
				<u-search v-model="searchValue" placeholder="搜索笔记" bgColor="#ffffff" :showAction="false" inputAlign="center" searchIcon=" " 
				@search="onSearch(searchValue)"></u-search>
			</view> -->
			<template v-slot:center>
				<view class="navbar-title">📔&nbsp;{{params.type == 0 ? "Tigo知识库" : "个人知识库" }}</view>
			</template>
		</u-navbar>

		<view class="h1">
			<view class="mr-15">🧠 {{ params.name || "知识库详情" }}</view>
			<!-- 只有个人知识库显示新增按钮 -->
			<u-icon v-if="params.type == 1" name="plus" color="#000" size="20" bold
				@click="showAddModel = true"></u-icon>
		</view>

		<view class="scroll-wrap">
			<scroll-view class="scroll-view_H" scroll-y @scrolltolower="loadMore" :lower-threshold="50">
				<view class="knowledge-container">
					<view class="knowledge-card" v-for="(item, i) in list" :key="item.id" @click="goNoteDetail(item)">
						<view class="card-header">
							<view class="title">📒 {{ item.name }}</view>
							<view class="pattern" :class="{
									'pattern-public': item.pattern === 0,
									'pattern-paid': item.pattern === 1,
									'pattern-private': item.pattern === 2
								}">
								{{ getPatternLabel(item) }}
							</view>
						</view>
						<view class="card-body">
							<text class="desc">{{ item.title || '暂无描述' }}</text>
						</view>
						<view class="card-footer">
							<text class="count">🗒️ 题目数量：{{ item.num || 0 }}</text>
						</view>
					</view>

					<view v-if="loading" class="loading-text">加载中...</view>
					<view v-if="noMore && list.length > 0" class="no-more-text">没有更多笔记了～</view>
					<view v-if="!loading && list.length === 0" class="no-more-text">暂无笔记～</view>
				</view>
			</scroll-view>
		</view>

		<custom-tab-bar :currentIndex="0"></custom-tab-bar>

		<!-- 新增笔记弹窗选择 -->
		<tn-modal v-model="showAddModel" :custom="true" :maskCloseable="false" :showCloseBtn="true"
			class="add-note-modal">
			<tn-list-view title="基础" :card="true" unlined="all" class="section-card">
				<view class="btn-group">
					<tn-button backgroundColor="#FFF9F3" fontColor="black" class="action-btn"
						@click="openAddNoteForm(params.id)">
						自定义笔记
					</tn-button>
					<!-- <tn-button backgroundColor="#FFF9F3" fontColor="black" class="action-btn" @click="addModuleNote">
						从模版新建
					</tn-button> -->
				</view>
			</tn-list-view>

			<tn-list-view title="更多" :card="true" unlined="all" class="section-card">
				<view class="btn-group">
					<tn-button backgroundColor="#FFF9F3" fontColor="black" class="action-btn"
						@click="addImportNote(params.id)">
						模板导入
					</tn-button>
				</view>
			</tn-list-view>
		</tn-modal>


		<!-- 新增自定义笔记填写弹窗 -->
		<tn-modal v-model="showNoteForm" :maskCloseable="false" :showCloseBtn="true" title="新增自定义笔记" :custom="true"
			class="note-modal">
			<tn-list-view title="笔记内容" :card="true" unlined="all" class="note-list-view">

				<!-- 发布模式选择 -->
				<view class="form-group">
					<label class="form-label">发布模式</label>
					<tn-button @click="showPatternSelect = true" class="pattern-btn"
						:class="{ 'has-value': noteForm.pattern !== null && noteForm.pattern !== undefined }">
						<span>{{ noteForm.pattern !== null && noteForm.pattern !== undefined ? getPatternLabelByValue(noteForm.pattern) : '请选择发布模式' }}</span>
						<u-icon name="arrow-down" size="20" color="#999" />
					</tn-button>
				</view>

				<!-- 笔记标题 -->
				<view class="form-group">
					<label class="form-label" for="note-name">笔记标题</label>
					<tn-input v-model="noteForm.name" id="note-name" placeholder="请输入笔记标题" class="input-field"
						clearable />
				</view>

				<!-- 笔记描述 -->
				<view class="form-group">
					<label class="form-label" for="note-desc">笔记描述</label>
					<tn-input v-model="noteForm.title" id="note-desc" placeholder="请输入笔记描述" class="input-field"
						clearable />
				</view>

				<!-- 专业/岗位代码 -->
				<view class="form-group">
					<label class="form-label" for="note-code">专业/岗位代码</label>
					<tn-input v-model="noteForm.code" id="note-code" placeholder="请选择专业/岗位代码" class="input-field"
						clearable />
				</view>

				<!-- 标签选择 -->
				<view class="form-group">
					<label class="form-label">标签</label>
					<tn-button @click="showTagSelect = true" class="tag-btn">
						选择标签 (已选 {{ noteForm.tagIds.length }})
						<u-icon name="arrow-down" size="18" color="black" style="margin-left: 4px" />
					</tn-button>
				</view>

				<!-- 题目列表 -->
				<tn-list-view title="题目列表" :card="true" unlined="all" class="questions-list">
					<view v-for="(question, index) in noteForm.topicDTOS" :key="index" class="question-item">
						<text class="question-title">题目 {{ index + 1 }}</text>
						<tn-input v-model="question.topic" placeholder="请输入题目内容" backgroundColor="#f7f8fa" shape="round"
							class="question-input" clearable />
						<tn-input v-model="question.answer" placeholder="请输入题目答案" backgroundColor="#f7f8fa"
							shape="round" class="question-input answer-input" clearable />
					</view>
					<view class="add-question-btn-wrapper">
						<u-icon name="plus" size="48rpx" color="#409EFF" @click="addQuestionItem"
							class="add-question-btn" />
					</view>
				</tn-list-view>
			</tn-list-view>

			<!-- 底部操作按钮 -->
			<view class="action-buttons">
				<tn-button backgroundColor="#409eff" fontColor="#fff" class="btn-save"
					@click="submitNote">保存</tn-button>
				<tn-button backgroundColor="#ccc" fontColor="#333" class="btn-cancel"
					@click="showNoteForm = false">取消</tn-button>
			</view>
		</tn-modal>


		<!-- 导入文件弹窗 -->
		<tn-modal v-model="showImportModal" :maskCloseable="false" :showCloseBtn="true" title="导入笔记文件" :custom="true"
			class="import-modal">
			<tn-list-view title="笔记模版导入" :card="true" unlined="all" class="section-card">
				<!-- 选择文件 -->
				<view class="form-group">
					<label class="form-label">选择文件</label>
					<view class="file-upload">
						<button @click="chooseFile">选择文件</button>
						<text class="file-name" v-if="selectedFile">{{ selectedFile.name }}</text>
					</view>
				</view>

				<!-- 参数输入区 -->
				<view class="form-group">
					<label class="form-label">发布类型</label>
					<tn-button @click="showImportPatternSelect = true" class="pattern-btn"
						:class="{ 'has-value': form.pattern !== null && form.pattern !== undefined }">
						<span>{{ form.pattern !== null && form.pattern !== undefined ? getPatternLabelByValue(form.pattern) : '请选择发布模式' }}</span>
						<u-icon name="arrow-down" size="10" color="black" />
					</tn-button>
				</view>

				<view class="form-group">
					<label class="form-label">标签</label>
					<tn-button @click="openImportTagSelect" class="tag-btn">
						请选择标签 (已选 {{ form.tagIds.length }})
						<u-icon name="arrow-down" size="18" color="black" style="margin-left: 4px" />
					</tn-button>
				</view>

				<view class="form-group">
					<label class="form-label">专业课/岗位代码</label>
					<input v-model="form.code" placeholder="请输入专业课/岗位代码" />
				</view>

				<view class="form-group">
					<label class="form-label">文件类型</label>
					<tn-button @click="showFileTypeSelect = true" class="pattern-btn"
						:class="{ 'has-value': form.fileType !== null && form.fileType !== undefined }">
						<span>{{ form.fileType !== null && form.fileType !== undefined ? getFileTypeByValue(form.fileType) : '请选择文件类型' }}</span>
						<u-icon name="arrow-down" size="10" color="black" />
					</tn-button>
				</view>
			</tn-list-view>

			<view class="footer-btn">
				<tn-button type="primary" shape="round" @click="submitImport">导入</tn-button>
			</view>
		</tn-modal>


		<!-- ============ 所有 tn-select 提到外层 ============ -->
		<tn-select v-model="showPatternSelect" :list="patternOptions" mode="single" title="请选择发布模式" :appendToBody="true"
			@confirm="onPatternConfirm" @cancel="onPatternCancel" />

		<tn-select v-model="showTagSelect" :list="tagList" mode="single" title="请选择标签" valueName="id"
			:appendToBody="true" @confirm="onTagConfirm" @cancel="onTagCancel" />

		<tn-select v-model="showImportPatternSelect" :list="patternOptions" mode="single" title="请选择发布模式"
			:appendToBody="true" @confirm="onImportPatternConfirm" @cancel="onImportPatternCancel" />

		<tn-select v-model="showImportTagSelect" :list="tagList" mode="single" title="请选择标签" valueName="id"
			:appendToBody="true" @confirm="onImportTagConfirm" @cancel="onImportTagCancel" />

		<tn-select v-model="showFileTypeSelect" :list="fileTypeOptions" mode="single" title="请选择文件类型"
			:appendToBody="true" @confirm="onFileTypeConfirm" @cancel="onFileTypeCancel" />


		<tn-toast ref="toast"></tn-toast>
	</view>
</template>

<script>
	import knowledgeInfo from "@/api/index.js";
	import {
		BASE_URL
	} from '@/api/config.js';

	export default {
		data() {
			return {
				bgColor: "transparent",
				list: [],
				page: 1,
				pageSize: 20,
				loading: false,
				noMore: false,
				params: {
					id: "",
					name: "",
					type: 0, // 0系统知识库，1个人知识库
				},
				showAddModel: false, // 添加笔记弹窗选择
				showNoteForm: false, // 新增笔记页弹窗
				// 新增选择弹窗控制变量
				showPatternSelect: false,
				showTypeSelect: false,
				showTagSelect: false,
				selectedTagItems: [],

				// 文件类型弹窗
				showFileTypeSelect: false,


				// 笔记导入弹窗
				showImportModal: false,
				showImportPatternSelect: false,
				showImportTagSelect: false,
				selectedImportTagItems: [],
				selectedFile: null,
				form: {
					userId: uni.getStorageSync('userId'),
					knowledgeBaseId: '',
					noteType: 1, // 用户笔记
					type: uni.getStorageSync('bindType'),
					fileType: null,
					pattern: "",
					tagIds: [],
					code: "",
					noteName: "",
					title: "",
				},
				fileTypeOptions: [{
						label: 'Word',
						value: '2'
					},
					{
						label: 'PDF',
						value: '3'
					}
				],

				noteForm: {
					name: "",
					title: "",
					code: "",
					type: uni.getStorageSync('bindType'),
					knowledgeBaseType: 1, // 用户知识库类型
					pattern: null, // 发布模式
					tagIds: [], // 标签
					userId: uni.getStorageSync('bindType'),
					num: "", // 笔记题目数量
					topicDTOS: [{
						topicNo: "",
						topic: "",
						answer: "",
						type: ''
					}, ],
				},

				patternOptions: [{
						label: "公开",
						value: 0
					},
					{
						label: "抽币",
						value: 1
					},
					{
						label: "私密",
						value: 2
					},
					{
						label: "未知",
						value: 3
					},
				],

				tagList: [], // 从后端查询

				searchValue: ''
			};
		},

		onLoad(options) {
			if (options.params) {
				let obj = JSON.parse(decodeURIComponent(options.params));
				this.params.id = obj.id;
				this.params.name = obj.name;
				this.params.type = obj.type;
			}
		},

		mounted() {
			this.getList();
			this.getNoteTagList(); // 👈 保证打开前已有标签数据
		},

		methods: {


			async getList() {
				if (this.noMore || this.loading) return;
				this.loading = true;
				try {
					const queryData = {
						pageQueryDTO: {
							currentPage: this.page,
							pageSize: this.pageSize,
						},
						type: uni.getStorageSync("bindType"),
						knowledgeBaseType: String(this.params.type),
						knowledgeBaseId: String(this.params.id),
					};
					let res;
					if (this.params.type == 0) {
						res = await knowledgeInfo.getSystemNoteListApi(queryData);
					} else {
						res = await knowledgeInfo.getUserNoteListApi(queryData);
					}
					if (res.data.code == 200) {
						const newData = res.data.data?.content || [];
						if (this.page === 1) {
							this.list = newData;
						} else {
							this.list = [...this.list, ...newData];
						}
						if (newData.length < this.pageSize) {
							this.noMore = true;
						} else {
							this.page++;
						}
					} else {
						this.$refs.toast.show({
							content: res.data.message || "获取失败",
							icon: "error",
							duration: 1500,
						});
					}
				} catch (error) {
					console.error("加载失败:", error);
					this.$refs.toast.show({
						content: "加载失败，请稍后重试",
						icon: "error",
						duration: 1500,
					});
				} finally {
					this.loading = false;
				}
			},

			loadMore() {
				this.getList();
			},

			getPatternLabel(item) {
				// 这里改为用 patternOptions 统一映射
				const pattern = this.patternOptions.find((p) => p.value === item.pattern);
				return pattern ? pattern.label : "未知";
			},

			getPatternLabelByValue(value) {
				const pattern = this.patternOptions.find((p) => p.value === value);
				return pattern ? pattern.label : "";
			},

			getFileTypeByValue(value) {
				const fileType = this.fileTypeOptions.find((p) => p.value === value);
				return fileType ? fileType.label : "";
			},

			getTypeLabelByValue(value) {
				const type = this.typeOptions.find((t) => t.value === value);
				return type ? type.label : "";
			},


			// 跳转笔记详情页面
			goNoteDetail(item) {
				const paramObj = {
					id: item.id,
					name: item.name,
					type: item.knowledgeBaseType,
					knowledgeBaseName: this.params.name,
					knowledgeBaseId: this.params.id
				};
				uni.navigateTo({
					url: "./noteDetail?params=" + encodeURIComponent(JSON.stringify(paramObj)),
				});
			},


			// 新增自定义笔记弹窗
			openAddNoteForm(knowledgeBaseId) {

				// 这里先获取当前题目数量，防止 this.noteForm 还没定义
				const currentTopicCount = this.noteForm.topicDTOS.length;

				this.noteForm = {
					name: "",
					title: "",
					code: "",
					type: uni.getStorageSync('bindType'),
					pattern: null,
					knowledgeBaseType: 1,
					knowledgeBaseId: knowledgeBaseId || "", // 这里用传入的知识库id
					tagIds: [],
					userId: uni.getStorageSync('userId'),
					num: "",
					topicDTOS: [{
						topicNo: currentTopicCount, // 赋值为当前序号,
						topic: "",
						answer: "",
						type: uni.getStorageSync('bindType')
					}, ],
				};
				this.showNoteForm = true;
			},

			async getNoteTagList() {
				try {
					const res = await knowledgeInfo.getNoteTagsApi({
						pageSize: 50,
						currentPage: 1
					});
					this.tagList = (res.data.data?.content || []).map(item => ({
						label: item.tagName,
						value: Number(item.id) // 明确类型转换
					}));
				} catch (err) {
					console.error("获取笔记标签失败", err);
				}
			},

			async submitNote() {
				// submitNote 加上 async/await，等接口请求成功后再刷新
				this.noteForm.num = this.noteForm.topicDTOS.length; // 动态计算题目数量
				try {
					const res = await knowledgeInfo.addNoteApi(this.noteForm);
					if (res.data.code === 200) { // 根据你接口的实际返回判断
						this.showNoteForm = false;
						this.showAddModel = false;
						this.refreshList();
						uni.showToast({
							title: '新增成功',
							icon: 'success'
						});
					} else {
						uni.showToast({
							title: res.data.message || '新增失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('新增笔记失败', error);
					uni.showToast({
						title: '新增失败，请重试',
						icon: 'none'
					});
				}
			},

			// addModuleNote() {
			// 	this.showAddModel = false;
			// 	uni.navigateTo({
			// 		url: "./note/addModuleNote",
			// 	});
			// },

			// 导入模版笔记文件
			addImportNote(knowledgeBaseId) {
				this.form.knowledgeBaseId = knowledgeBaseId;
				this.showImportModal = true;
			},
			chooseFile() {
				uni.chooseMessageFile({
					count: 1,
					type: 'file',
					success: (res) => {
						this.selectedFile = res.tempFiles[0];
					}
				});
			},

			// 导入笔记提交
			async submitImport() {
				if (!this.selectedFile) {
					return uni.$u.toast('请先选择文件');
				}

				if (!this.form.userId || !this.form.knowledgeBaseId || this.form.noteType == null || !this.form
					.fileType) {
					return uni.$u.toast('请填写完整参数');
				}

				try {
					const userId = uni.getStorageSync('userId');
					if (!userId) {
						uni.showToast({
							title: '用户未登录',
							icon: 'none'
						});
						return;
					}


					// 文件类型校验
					// 文件扩展名
					const fileTypeMap = {
						'2': ['.doc', '.docx'], // Word
						'3': ['.pdf'] // PDF
					}
					const filePath = this.selectedFile.path;
					const fileType = this.form.fileType;
					const allowedExtensions = fileTypeMap[fileType];
					if (!allowedExtensions) {
						uni.showToast({
							title: '不支持的文件类型',
							icon: 'none'
						});
						return;
					}
					const fileExt = filePath.slice(filePath.lastIndexOf('.')).toLowerCase();
					console.log("fileExt: " + fileExt)
					if (!allowedExtensions.includes(fileExt)) {
						const expected = fileType === '2' ? 'Word(.doc/.docx)' : 'PDF(.pdf)';
						uni.showToast({
							title: `文件类型与选择不一致，请上传 ${expected} 文件`,
							icon: 'none'
						});
						return;
					}


					const res = await new Promise((resolve, reject) => {
						uni.uploadFile({
							url: `${BASE_URL}/sign/note/template/upload/${this.form.fileType}`,
							filePath: filePath,
							name: 'file',
							formData: {
								userId: userId,
								noteName: this.selectedFile.name,
								title: "导入笔记: " + this.selectedFile.name,
								knowledgeBaseId: this.form.knowledgeBaseId,
								noteType: 1, // 用户笔记
								type: this.form.type,
								fileType: this.form.fileType,
								code: this.form.code,
								tagIds: this.selectedImportTagItems.join(','),
								pattern: this.form.pattern,
							},
							header: {
								'token': uni.getStorageSync('token') || '',
							},
							success: resolve,
							fail: reject
						});
					});

					const data = JSON.parse(res.data);
					if (data.code === 200) {
						uni.$u.toast('导入成功');
						this.refreshList();
						this.showImportModal = false;
						this.showAddModel = false;
					} else {
						uni.$u.toast(data.msg || '导入失败');
					}
				} catch (e) {
					console.error('上传异常', e);
					uni.$u.toast('上传异常');
				}
			},





			refreshList() {
				this.page = 1;
				this.noMore = false;
				this.list = [];
				this.getList();
			},

			addQuestionItem() {
				this.noteForm.topicDTOS.push({
					topicNo: (Array.isArray(this.noteForm.topicDTOS) ? this.noteForm.topicDTOS.length : 1) +
						1, // 赋值为当前序号
					topic: "",
					answer: "",
					type: uni.getStorageSync('bindType') || '0'
				});
			},

			// 发布模式选择回调
			onPatternConfirm(selected) {
				if (selected && selected.length > 0) {
					this.noteForm.pattern = selected[0].value;
				}
				this.showPatternSelect = false;
			},
			onPatternCancel() {
				this.showPatternSelect = false;
			},


			// 文件类型选择回掉
			onFileTypeConfirm(selected) {
				if (selected && selected.length > 0) {
					this.form.fileType = selected[0].value;
				}
				this.showFileTypeSelect = false;
			},
			onFileTypeCancel() {
				this.showFileTypeSelect = false;
			},


			// 笔记导入发布模式选择回掉
			// 发布模式选择回调
			onImportPatternConfirm(selected) {
				if (selected && selected.length > 0) {
					this.form.pattern = selected[0].value;
				}
				this.showImportPatternSelect = false;
			},
			onImportPatternCancel() {
				this.showImportPatternSelect = false;
			},

			// 标签选择回调
			openTagSelect() {
				// 显示选择器
				this.showTagSelect = true;
			},

			onTagConfirm(selectedItems) {
				this.noteForm.tagIds = selectedItems.map(item => item.value);
				this.selectedTagItems = this.tagList.filter(tag => this.form.tagIds.includes(tag.value));;
				this.showTagSelect = false;
			},
			onTagCancel() {
				this.showTagSelect = false;
			},


			// 笔记导入标签选择回调
			openImportTagSelect() {
				// 显示选择器
				this.showImportTagSelect = true;
			},

			onImportTagConfirm(selectedItems) {
				this.form.tagIds = selectedItems.map(item => item.value);
				this.selectedImportTagItems = this.tagList.filter(tag => this.form.tagIds.includes(tag.value));;
				this.showImportTagSelect = false;
			},
			onImportTagCancel() {
				this.showImportTagSelect = false;
			},


		},



		onShow() {
			if (uni.getStorageSync("noteAdded")) {
				this.refreshList();
				uni.setStorageSync("noteAdded", false);
			}
			this.refreshList();
		},
	};
</script>


<style lang="scss" scoped>
	.navbar-title {
		font-weight: 700;
		/* 加粗 */
		font-size: 36rpx;
		/* 字体大小，可根据需求调整 */
		color: #333333;
		/* 颜色也可以自定义 */
		text-align: center;
		/* 居中 */
	}


	.search-wrap {
		width: 200px;
		height: 33px;
		border-radius: 20px;
		opacity: 1;
		background: #fcfcfc;
	}

	.h1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 42rpx;
		font-weight: 600;
		color: #000;
		margin: 40rpx 24rpx 20rpx;
	}

	.scroll-wrap {
		width: 100%;
		height: calc(100vh - 260rpx); // 减去 navbar + .h1 高度
		padding: 0 24rpx;
		box-sizing: border-box;
	}


	// 知识库详情 笔记展示页
	.knowledge-container {
		padding: 30rpx 20rpx;
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.knowledge-card {
		background: #ffffff;
		border-radius: 24rpx;
		box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.05);
		padding: 32rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		transition: all 0.2s;
	}

	.card-header {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.pattern {
			font-size: 24rpx;
			padding: 6rpx 18rpx;
			border-radius: 28rpx;
			font-weight: 600;
		}

		.pattern-public {
			background-color: #e4f7ea;
			color: #3c9a4c;
		}

		.pattern-paid {
			background-color: #fff4e1;
			color: #d58b15;
		}

		.pattern-private {
			background-color: #f0f0f0;
			color: #999;
		}
	}

	.card-body {
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
	}

	.card-footer {
		font-size: 24rpx;
		color: #999;
		text-align: right;
	}

	.knowledge-li {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.05);
		transition: box-shadow 0.3s;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 12rpx;

			.top-left {
				display: flex;
				flex-direction: column;
				gap: 8rpx;
				font-size: 28rpx;
				color: #333;
			}

			.top-right {
				padding: 6rpx 20rpx;
				border-radius: 40rpx;
				font-size: 24rpx;
				color: black;

				&.pattern-public {
					background-color: #FFF9F3;
				}

				&.pattern-paid {
					background-color: #e6a23c;
				}

				&.pattern-private {
					background-color: #909399;
				}
			}
		}

		.bottom {
			font-size: 26rpx;
			color: #666;
		}
	}


	// 新增笔记页ui,
	.no-more-text {
		text-align: center;
		font-size: 26rpx;
		color: #999;
		padding: 32rpx 0;
	}

	.note-modal {
		max-height: 90vh;
		overflow-y: auto;
	}

	.note-list-view {
		padding-bottom: 0 !important;
	}

	.form-group {
		margin-bottom: 20rpx;
	}

	.form-label {
		font-weight: 600;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 6rpx;
		display: block;
	}

	.pattern-btn {
		width: 100%;
		justify-content: space-between;
		padding: 12rpx 20rpx;
		border: 1rpx solid #dcdfe6;
		border-radius: 8rpx;
		background-color: #fff;
		color: #999;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		cursor: pointer;

		&.has-value {
			color: #000;
		}
	}

	.input-field {
		background-color: #fff;
		border-radius: 8rpx;
		border: 1rpx solid #dcdfe6;
		padding: 8rpx 16rpx;
		font-size: 28rpx;
	}

	.tag-btn {
		width: 100%;
		justify-content: center;
		padding: 12rpx 20rpx;
		border-radius: 8rpx;
		background-color: #f5f7fa;
		color: #606266;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.questions-list {
		margin-top: 20rpx;
		padding-bottom: 0 !important;
	}

	.question-item {
		background-color: #f9fafb;
		border-radius: 12rpx;
		padding: 16rpx 20rpx;
		margin-bottom: 16rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.06);
	}

	.question-title {
		font-weight: 600;
		font-size: 28rpx;
		margin-bottom: 10rpx;
		color: #333;
		display: block;
	}

	.question-input {
		margin-bottom: 12rpx;
	}

	.answer-input {
		margin-top: -8rpx;
	}

	.add-question-btn-wrapper {
		display: flex;
		justify-content: center;
		margin-top: 8rpx;
	}

	.add-question-btn {
		cursor: pointer;
	}

	.action-buttons {
		display: flex;
		justify-content: space-between;
		padding: 24rpx 0;
		border-top: 1rpx solid #eaeaea;
	}

	.btn-save {
		flex: 1;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}

	.btn-cancel {
		flex: 1;
		border-radius: 12rpx;
	}


	// 新增笔记弹窗选择页 ui
	.add-note-modal {
		max-height: 70vh;
		overflow-y: auto;
		padding: 0 16rpx;
	}

	.section-card {
		margin-bottom: 24rpx;
		border-radius: 16rpx;
		box-shadow: 0 6rpx 12rpx rgba(64, 158, 255, 0.15);
		background-color: #fff;
		padding: 24rpx 20rpx;
	}

	.btn-group {
		display: flex;
		gap: 16rpx;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.action-btn {
		flex: 1 1 calc(50% - 16rpx);
		min-width: 120rpx;
		padding: 14rpx 0;
		font-size: 30rpx;
		border-radius: 12rpx;
		box-shadow: 0 4rpx 8rpx rgba(64, 158, 255, 0.3);
		transition: box-shadow 0.3s ease;
		user-select: none;
	}

	.action-btn:active {
		box-shadow: 0 2rpx 4rpx rgba(64, 158, 255, 0.6);
	}

	.section-card:last-child {
		margin-bottom: 0;
	}


	// 模版笔记上传


	.form-label {
		font-weight: bold;
		margin-bottom: 8rpx;
	}

	.file-upload {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.file-name {
		color: #666;
		font-size: 28rpx;
	}

	.footer-btn {
		margin-top: 40rpx;
		padding: 0 32rpx 32rpx;
	}

	/* 选择器弹层 */
	::v-deep .tn-select__popup {
		position: fixed !important;
		z-index: 9999 !important;
	}
</style>